<!DOCTYPE html>
<html lang="en">
  <head>
    <title><%= title %></title>
    <% include partials/head.ejs %>
  </head>
  <body class="h-100">

    <!--NavBar-->
    <div class="row mainNav">
      <div class="col-12">
        <nav class="navbar navbar-expand-lg navbar-dark">
          <a class="navbar-brand" href="#">FreeMyMaps</a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
            <div class="navbar-nav">
              <a class="nav-item nav-link" href="#" data-toggle="modal" data-target="#aboutModal">About <span class="sr-only">(current)</span></a>
              <a class="nav-item nav-link" href="#">FAQ</a>
              <a id="login" class="nav-item nav-link" href="#" data-toggle="modal" data-target="#loginInModal">Login</a>
              <a id="signup" class="nav-item nav-link" href="#"  data-toggle="modal" data-target="#signUpModal">Sign Up</a>
            </div>
          </div>
        </nav>
      </div>
    </div>

    <% include partials/authModals/signup.ejs %>
    <% include partials/authModals/login.ejs %>
    <% include partials/aboutModal.ejs %>

     <!--Side navigation -->
    <!--<div class="sidenav">-->
      <!--<a href="#">About</a>-->
      <!--<a href="#">Services</a>-->
      <!--<a href="#">Clients</a>-->
      <!--<a href="#">Contact</a>-->
    <!--</div>-->

    <!-- Page content -->
    <div class="main">
      <div id="map" tabindex="1" class="map"></div>
      <div id="map-marker-popup"></div>
      <div id="help-tool-tip"></div>
      <div id="measure-tool-tip" ></div>
      <div id="mouse-position"></div>
      <div id="popup"></div>

      <!--Selectors for Map Features -->
      <!--Changes Type of Map-->
      <div id="select-map" class="float-left">
        <label for="layer-select" style="color: white;">Map</label>
        <select id="layer-select">
          <option value="normal.day" selected>Normal Day</option>
          <option value="normal.day.transit">Normal Day Transit</option>
          <option value="pedestrian.day">Pedestrian Day</option>
          <option value="hybrid.day">Hybrid Day</option>
          <option value="terrain.day">Terrain Day</option>
          <option value="satellite.day">Satellite Day</option>
          <option value="topo.image">Topographical w/ Satellite</option>
          <option value="topo.day">Topographical</option>
        </select>
      </div>

      <!-- Changes Drawing Type -->
      <div id="draw-geometry">
        <label for="draw-type" style="color: white;">Draw</label>
        <select id="draw-type">
          <option value="Circle">Circle</option>
          <option value="LineString">LineString</option>
          <option value="Polygon">Polygon</option>
          <option value="FreeLine">Freehand</option>
          <option value="FreePoly">Freehand Polygon</option>
          <option value="None" selected>None</option>
        </select>
      </div>

      <!-- DONWLOADS -->
      <div id="download" class="float-right">
        <!-- Downloads current map viewport as png -->
        <a id="export-png" class="btn btn-outline-light" role="button" style="color: white"><i class="fas fa-download"  style="color: white"></i> Download PNG</a>
        <!-- Download GeoJSON data -->
        <a id="download-geo" class="btn btn-outline-light" style="color: white" download="features.json"><i class="fas fa-download"  style="color: white"></i> Download GeoJSON</a>
      </div>
    </div>


    <% include partials/footer.ejs %>

    <script type="module" src="/javascripts/maps/build/main.map.js"></script>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

    <script type="text/javascript" src="/javascripts/auth/signUp.js"></script>

    <% if (message) { %>
      <script>
        $('#login').click();
      </script>
    <% } %>

  </body>
</html>
